<template>
  <div style="padding: 10px;background-color: #e3f2fd;">
    <h2>父组件</h2>
    <p>用户信息：{{ userInfo }}</p>
    <p>
      <button @click="updateUserInfo">修改数据</button>
    </p>
    <Child/>
  </div>
</template>

<script>
import {reactive, provide} from 'vue'
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  name: "Parent",
  setup() {

    const userInfo = reactive({
      username: '管理员001',
      type: '管理员'
    })

    // 给后代组件传递数据
    provide('userInfo', userInfo)
    provide('role', ['admin', 'guest', 'user'])

    // 修改信息，后代组件传递数据也可以响应
    const updateUserInfo = () => {
      userInfo.username = '管理员' + Math.floor(Math.random() * 100)
    }

    return {
      userInfo,
      updateUserInfo
    }
  }
}
</script>

<style scoped>

</style>